<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://www.ecside.org" prefix="ec"%>
<jsp:useBean id="pageBean" scope="request" class="com.agileai.hotweb.domain.PageBean"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" href="flow/lib/jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="flow/lib/raphael-min.js"></script>
<script type="text/javascript" src="flow/lib/jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="flow/lib/jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/jquery.hotkeys.js"></script>
<script type="text/javascript" src="flow/myflow.js"></script>
<script type="text/javascript" src="flow/myflow.jpdl3.js"></script>
<script type="text/javascript" src="flow/myflow.editors.js"></script>
<script src="js/ArrayList.js" type="text/javascript"></script>
<script src="js/Map.js" type="text/javascript"></script>
<script src="js/draggabilly.pkgd.min.js" language="javascript"></script>
<script src="js/PopupBox.js" language="javascript"></script>
<script type="text/javascript">
var generalBox;
function setupRequest(){
	if (!generalBox){
		generalBox = new PopupBox('generalBox','流程基础信息',{top:'30px',size:'big',height:'530px'});		
	}
	generalBox.sendRequest('index?WfProcessGeneralEdit&WFP_ID='+$('#WFP_ID').val());
}

var activityBox;
function showActivityBox(objType,activityId){
	var processId = $('#WFP_ID').val();
	var url = 'index?WfProcessActivityEdit&processId='+processId+'&curObjType='+objType+'&activityId='+activityId;
	if (!activityBox){
		activityBox = new PopupBox('activityBox','活动基础信息',{top:'30px',size:'big',height:'530px'});		
	}
	activityBox.sendRequest(url);
}

var transitionBox;
function showTransitionBox(transitionId){
	var processId = $('#WFP_ID').val();
	if (!transitionBox){
		transitionBox = new PopupBox('transitionBox','流转基础信息',{top:'30px',size:'big',height:'480px'});
	}
	var url = 'index?WfProcessTransitionEdit&processId='+processId+'&transitionId='+transitionId;
	transitionBox.sendRequest(url);
}

var currObject;

var currentModel;
function setModelText(name){
	if (currentModel){
		currentModel.setText(name);
	}
}

var currentLine;
function setLineText(name){
	if (currentLine){
		currentLine.setText(name);
	}
}
</script>
<style type="text/css">
body {
	margin: 0;
	pading: 0;
	text-align: left;
	font-family: Arial, sans-serif, Helvetica, Tahoma;
	font-size: 12px;
	line-height: 1.5;
	color: black;
	background-image: url(flow/img/bg.png);
}
.node {
	width: 70px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #fff;
    height: 23px;
    line-height: 23px;	
}
.node img{
	vertical-align:middle;
}

.mover {
	border: 1px solid #ddd;
	background-color: #ddd;
}

.selected {
	background-color: #ddd;
}

.state {
	
}

#pointer {
	background-repeat: no-repeat;
	background-position: center;
}

#path {
	background-repeat: no-repeat;
	background-position: center;
}

#task {
	background-repeat: no-repeat;
	background-position: center;
}

#state {
	background-repeat: no-repeat;
	background-position: center;
}
</style>
</head>
<body>
<form action="<%=pageBean.getHandlerURL()%>" name="form1" id="form1" method="post">
	<div id="myflow_tools" style="position: absolute; top: 10; left: 10; background-color: #fff; width: 70px; cursor: default; padding: 3px;" class="ui-widget-content">
		<div id="myflow_tools_handle" style="text-align: center;" class="ui-widget-header">工具集</div>
		<div class="node" id="save">
			<img src="flow/img/save.png" />&nbsp;&nbsp;保存
		</div>
		<div class="node" id="prop">
			<img src="flow/img/design.gif" />&nbsp;&nbsp;属性
		</div>
		<div><hr /></div>
		<div class="node selectable" id="pointer">
			<img src="flow/img/select16.gif" />&nbsp;&nbsp;选择
		</div>
		<div class="node selectable" id="path">
			<img src="flow/img/sequenceFlow.gif" />&nbsp;&nbsp;连线
		</div>
		<div><hr /></div>
		<div class="node state" id="start" type="start">
			<img src="flow/img/start.png" />&nbsp;&nbsp;开始
		</div>
		<div class="node state" id="state" type="manual">
			<img src="flow/img/manual.png" />&nbsp;&nbsp;人工
		</div>
		<div class="node state" id="task" type="audit">
			<img src="flow/img/audit.png" />&nbsp;&nbsp;审批
		</div>
		<div class="node state" id="fork" type="fork">
			<img src="flow/img/fork.gif" />&nbsp;&nbsp;分支
		</div>
		<div class="node state" id="join" type="join">
			<img src="flow/img/join.gif" />&nbsp;&nbsp;合并
		</div>
		<div class="node state" id="end-cancel" type="invoke">
			<img src="flow/img/invoke.png" />&nbsp;&nbsp;调用
		</div>
		<div class="node state" id="end-error" type="watch">
			<img src="flow/img/watch.png" />&nbsp;&nbsp;等待
		</div>		
		<div class="node state" id="end" type="end">
			<img src="flow/img/end.png" />&nbsp;&nbsp;结束
		</div>
	</div>
	<div id="myflow"></div>
	<input type="hidden" name="actionType" id="actionType" value=""/>
	<input type="hidden" name="tempJson" id="tempJson" value=""/>
	<input type="hidden" name="processJson" id="processJson" value=""/>
	<input type="hidden" name="objectIndex" id="objectIndex" value=""/>
	<input type="hidden" name="evtObjec" id="evtObjec" value=""/>
	<input type="hidden" id="WFP_ID" name="WFP_ID" value="<%=pageBean.inputValue("WFP_ID")%>" />	
</form>
</body>
</html>
<script>
$(function(){

	var url = "index?WfProcessDefineEdit&actionType=retrieveJsonData&WFP_ID=<%=pageBean.inputValue("WFP_ID")%>";
	sendRequest(url,{onComplete:function(responseText){
		var jsonObject = $.parseJSON(responseText);
		$("#objectIndex").val(jsonObject.props.props.index.value);
		flowObject = $('#myflow').myflow({
					basePath : "",
					restore : jsonObject,
					tools : {
						save : {
							onclick : function(data) {
								//alert(data);
								$("#processJson").val(data);
								postRequest('form1',{actionType:'saveProccessDefine',onComplete:function(responseText){
									if ('success' == responseText){
										alert('保存成功！');
									}									
								}});								
							}
						}
					}
				});		
		
	}});	
	
	$('#myflow').bind("contextmenu",function(){
		$('#pointer').click();
		return false;
	});
	
	$(document).bind('keydown','ctrl+s',function (){
		$("#save").click();
		return false;
	});	
});

$(document).bind('keydown','ctrl+e',function (){
	if (currObject){
		//alert(currObject.toJson());
		var jsonObj = $.parseJSON(currObject.toJson());
		if (jsonObj.hasOwnProperty("type")){
			currentModel = currObject;
			var objId = jsonObj.props.key.value;
			var objType = jsonObj.type;
			showActivityBox(objType,objId);
		}else{
			currentLine = currObject;
			var objId = jsonObj.props.key.value;
			showTransitionBox(objId);
		}				
	}			
	return false;
});	

var currentNode;
$(document).bind('keydown','alt+left',function (){
	if (currentNode){
		currentNode.moveX(-1);		
	}
	return false;
});	

$(document).bind('keydown','alt+right',function (){
	if (currentNode){
		currentNode.moveX(1);		
	}
	return false;
});	

$(document).bind('keydown','alt+up',function (){
	if (currentNode){
		currentNode.moveY(-1);		
	}
	return false;
});	

$(document).bind('keydown','alt+down',function (){
	if (currentNode){
		currentNode.moveY(1);		
	}
	return false;
});	
</script>